<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Kickstart introduce</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="navbar.css" rel="stylesheet">
  </head>
  <style>
      a
      {
          text-decoration: none;
          color: #000000;
      }
      a:hover
      {
          text-decoration: none;
          color: #000000;
      }
li:hover
      {
    color: #fffdfd;
    background-color: #ffd246;
      }
 .triangle
 {
     border-bottom-width: 20px;
     border-right-width: 20px;
     border-top-width: 20px;
     border-left-width: 20px;
     width: 0px;
     height: 0px;
     border-style:solid solid solid solid;
     border-color: #ff6308 transparent transparent #ff6308 ;
 }
  </style>
  <body>
    <div class="container">
      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="color: #ff6308">HTML Kickstart</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="table.html">table</a></li> <!--  class="active"-->
              <li><a href="menus.html">menus</a></li>
              <li><a href="button.html">button</a></li>
                <li><a href="kickstart%20forms-style.html">forms</a></li>
                </ul>
        </div><!--/.container-fluid -->
      </nav>
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1><span style="color: #ff4e06">HTML Kickstart</span> introduce</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
          <p>
              <a class="btn btn-lg btn-primary" href="table.html" role="button">Start Learning &raquo;</a>
          </p>
      </div>
           <br/>
    <table  align="center">
        <tr>
            <td height="30px;"><div class="triangle"></div><a href="button.html"><h2 style="margin-left: 50px;"><font color="red">button</font>样式</h2></a></td>
            <td><div class="triangle"></div> <a href="kickstart%20forms-style.html"><h2 style="margin-left: 50px;"><font color="red">form</font>样式</h2></a></td>
            <td><div class="triangle"></div><a href="menus.html"><h2 style="margin-left: 50px;"><font color="red">menus</font>样式</h2></a></td>
            <td><div class="triangle"></div><a href="table.html"><h2 style="margin-left: 50px;"><font color="red">table</font>样式</h2></a></td>
        </tr>
        <tr>
            <td width="300px" height="250px" style="padding: 20px;">
一共包含了18个样式，样式主要运用了css3来设计和书写，在引用样式时候只要将相应的class选择器和属性选择器的名字所对应的代码复制粘贴即可。</td>
            <td width="300px" height="250px" style="padding: 20px;">
对于表单样式的设计，在这里所选择的并不是那么的完善，还有许多地方有待各位完善。使用方法和button样式的使用方法类似。</td>
            <td width="300px" height="250px" style="padding: 20px;">
对于导航栏的设计，个人只是简单的将一些kickstart里面的简单样式给列举了出来，并且还额外多增加了4款不同颜色的样式选择，可以方便使用者快速开发时所引用，简单轻便。
   <td width="300px" height="250px" style="padding: 20px;">
table的样式一般比较多的是出现在管理员界面的数据统计显示上面，因此，在这里自己仅仅只是将kickstart里面所存有的样式给出来，供大家参考参考。（颜色是可以自己选择的）
        </tr>
    </table>
    </div> <!-- /container -->
  </body>
</html>
